<template>
    <div class="applyForm">
        <img src="/static/h5/school-img.jpg" style="width:100%">
        <div class=" pl10 pr10">
            <sc-title>报名步骤</sc-title>
            <div class="steps">
                <van-steps :active="stepActive" active-icon="records" finish-icon="passed" inactive-icon="description" active-color="#38f"
                           @click-step="clickStep">
                    <van-step>基本信息</van-step>
                    <van-step>家庭信息</van-step>
                    <van-step>考试成绩</van-step>
                    <van-step>特长及获奖</van-step>
                </van-steps>
            </div>

            <Form1 @changeStep="changeStep" v-if="!stepActive"></Form1>
            <Form2 @changeStep="changeStep" v-else-if="stepActive===1"></Form2>
            <Form3 @changeStep="changeStep" v-else-if="stepActive===2"></Form3>
            <Form4 @changeStep="changeStep" v-else></Form4>
        </div>
    </div>
</template>

<script>
import Form1 from "./components/form1";
import Form2 from "./components/form2";
import Form3 from "./components/form3";
import Form4 from "./components/form4";

export default {
    name: "applyForm",
    components: {
        Form1,
        Form2,
        Form3,
        Form4,
    },
    data() {
        return {
            stepActive: 0,
        }
    },
    created() {
        this.getOpenid()
    },
    methods: {
        // 点击步骤条
        clickStep(index) {
            // this.stepActive = index
        },
        changeStep(index) {
            this.stepActive = index
        },
        // 获取openid
        async getOpenid() {
            const openId = this.$ls.get('openId')
            console.log("openId", openId)
            if (openId) return
            const wxCode = this.$utils.getUrlParams('code')
            console.log("wxCode", wxCode)
            console.log("isDev", this.isDev)
            if (!wxCode && !this.isDev) {
                window.location.href = 'https://enrollment.yulaisoft.com/registration/registration_url'
                return
            }
            const {code, data} = await this.$api.studentForm.getOpenid({
                code: wxCode
            })
            if (code === 200) {
                this.$ls.set('openId', data)//3600 * 24)
                return
            }
        },
    }
}
</script>
<style lang='scss' scoped>
.applyForm {
    max-width: 100vw;
    //overflow: hidden;

    .steps {
        //width: 100vw;
        //overflow: hidden;
        position: sticky;
        top: 0;
        //left: 0;
        //right: 0;
        z-index: 1;
    }

    /deep/ .van-steps {
        .van-step__title {
            font-size: 13px;
        }

        .van-step__circle-container {
            margin-top: 3px;
        }

        .van-step__line {
            margin-top: 3px;
        }

        .van-icon {
            font-size: 19px;
        }

        .van-step__title--active {
            font-weight: bold;
        }

        .van-step__circle {
            width: 7px;
            height: 7px
        }
    }
}
</style>
